<template>
  <ACollapse
    v-model:activeKey="activeKey1"
    :expand-icon-position="expandIconPosition"
    :bordered="bordered"
    :accordion="accordion"
    :ghost="ghost"
    :destroy-inactive-panel="destroyInactivePanel"
    :collapsible="collapsible"
    :expand-icon="expandIcon"
  >
    <template v-if="$slots.expandIcon" #expandIcon>
      <slot name="expandIcon" />
    </template>
    <slot />
  </ACollapse>
</template>

<script>
import { Collapse } from 'ant-design-vue'

import { defineComponent } from 'vue'
export default defineComponent({
  name: 'ZCollapse',
  components: {
    ACollapse: Collapse
  },
  props: {
    activeKey: {
      type: [String, Array],
      default: undefined
    },
    accordion: {
      type: Boolean,
      default: false
    },
    bordered: {
      type: Boolean,
      default: true
    },
    collapsible: {
      type: String,
      default: undefined
    },
    destroyInactivePanel: {
      type: Boolean,
      default: false
    },
    expandIcon: {
      type: Function,
      default: undefined
    },
    expandIconPosition: {
      type: String,
      default: undefined
    },
    ghost: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    activeKey1: {
      get() {
        return this.activeKey
      },
      set(val) {
        this.$emit('update:activeKey', val)
      }
    }
  }
})
</script>
